.event-list-item {
  display: flex;
}
.event-list-item:hover {
  background-color: #eee;
}
.event-list-item_indirect-root-trigger {
  margin-bottom: 5px;
}

.event-list-item[data-op="unmount"] {
  --type-image: url("../../../images/event-unmount.svg");
  --type-image-size: 13px;
}
.event-list-item[data-op="mount"] {
  --type-color: #cbe4b4;
  --type-image: url("../../../images/event-mount.svg");
  --type-image-size: 13px;
  --selected-fiber-bg-color: #e1eed5;
  --selected-fiber-color: #688c46;
}
.event-list-item[data-op="update"],
.event-list-item[data-op="update-trigger"] {
  --type-color: #efe6a9;
  --type-image: url("../../../images/event-update.svg");
  --type-image-size: 11px;
  --selected-fiber-bg-color: #f0f0d5;
  --selected-fiber-color: #898927;
}
.event-list-item[data-op="update-trigger"] {
  --type-image: url("../../../images/update-trigger.svg");
  --type-image-size: 9px;
}
/* .event-list-item[data-op="update-bailout-state"] {
  --type-color: #ffbbbb;
  --type-image: url("../../../images/event-update-bailout-state.svg");
  --type-image-size: 11px;
  --selected-fiber-bg-color: #f6e3e3;
  --selected-fiber-color: #ac6f6f;
} */
.event-list-item[data-op="update-bailout-state"],
.event-list-item[data-op="update-bailout-memo"],
.event-list-item[data-op="update-bailout-scu"] {
  --type-color: #c4dced;
  --type-image: url("../../../images/event-update-bailout-memo.svg");
  --type-image-size: 11px;
  --selected-fiber-bg-color: #d9e8f3;
  --selected-fiber-color: #7090a7;
}
.event-list-item[data-op="effect-create"] {
  --type-color: #bcddf5;
  --type-image: url("../../../images/event-effect-create.svg");
  --type-image-size: 13px;
}
.event-list-item[data-op="effect-destroy"] {
  --type-color: #e1c7ef;
  --type-image: url("../../../images/event-effect-destroy.svg");
  --type-image-size: 13px;
}

.event-list-item__time {
  min-width: 40px;
  padding: 6px 5px 1px 0;
  vertical-align: top;
  text-align: right;
  font-size: 10px;
  line-height: 12px;
  color: #888;
}

.event-list-item__content {
  flex: 1;
}
.event-list-item__main {
  display: flex;
  flex-wrap: wrap;
}

.event-list-item__dots {
  --size: 15px;
  position: relative;
  min-width: 25px;
  margin-left: 3px;
  margin-right: 3px;
}
.event-list-item_selected .event-list-item__dots {
  --size: 19px;
}
.event-list-item_indirect-root-trigger .event-list-item__dots {
  margin-bottom: -5px;
}
.event-list-item__dots-prev,
.event-list-item__dots-next {
  position: absolute;
  left: 10px;
  width: 3px;
  background-color: var(--type-color, #e8e8e8);
  background-clip: padding-box;
  border: solid rgba(255, 255, 255, 0.65);
  border-width: 0 1px;
}
.event-list-item__dots-prev {
  top: 0;
  height: calc(11px - (var(--size) - 1px) / 2);
}
.event-list-item__dots-next {
  top: calc(12px + (var(--size) - 1px) / 2);
  bottom: 0;
}
.event-list-item__dot {
  position: absolute;
  top: calc(10px - (var(--size) - 1px) / 2);
  left: calc(11px - (var(--size) - 1px) / 2);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: center no-repeat;
  background-color: var(--type-color, #e8e8e8);
  background-image: var(--type-image);
  background-size: var(--type-image-size);
  background-clip: padding-box;
  cursor: default;
}

.event-list-item__indirect-root-trigger::before {
  content: "";
  display: block;
  position: absolute;
  left: 8px;
  bottom: 0;
  z-index: 1;
  height: 5px;
  width: 9px;
  background: url("../../../images/dots.svg") center no-repeat
    rgba(255, 255, 255, 0.65);
  background-size: 9px;
  border-radius: 2px;
}
